<template>
  <el-button
    v-if="type === 'primary'"
    type="primary"
    :size="size"
    :disabled="disabled"
    :loading="loading"
    :icon="icon"
    :round="round"
    class="button-box"
    @click="handleClick">
    <slot>{{ text }}</slot>
  </el-button>

  <el-button
    v-else-if="type === 'success'"
    type="success"
    :size="size"
    :disabled="disabled"
    :loading="loading"
    :icon="icon"
    :round="round"
    class="button-box"
    @click="handleClick">
    <slot>{{ text }}</slot>
  </el-button>

  <el-button
    v-else-if="type === 'warning'"
    type="warning"
    :size="size"
    :disabled="disabled"
    :loading="loading"
    :icon="icon"
    :round="round"
    class="button-box"
    @click="handleClick">
    <slot>{{ text }}</slot>
  </el-button>

  <el-button
    v-else-if="type === 'danger'"
    type="danger"
    :size="size"
    :disabled="disabled"
    :loading="loading"
    :icon="icon"
    :round="round"
    class="button-box"
    @click="handleClick">
    <slot>{{ text }}</slot>
  </el-button>

  <el-button
    v-else-if="type === 'info'"
    type="info"
    :size="size"
    :disabled="disabled"
    :loading="loading"
    :icon="icon"
    :round="round"
    class="button-box"
    @click="handleClick">
    <slot>{{ text }}</slot>
  </el-button>

  <el-button
    v-else
    :size="size"
    :disabled="disabled"
    :loading="loading"
    :icon="icon"
    :round="round"
    class="button-box"
    @click="handleClick">
    <slot>{{ text }}</slot>
  </el-button>
</template>

<script>
export default {
  name: 'ButtonBox',
  props: {
    type: {
      type: String,
      default: 'default',
      validator: value => ['primary', 'success', 'warning', 'danger', 'info', 'default'].includes(value)
    },
    size: {
      type: String,
      default: 'medium',
      validator: value => ['large', 'medium', 'small', 'mini'].includes(value)
    },
    text: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: true
    },
    confirm: {
      type: String,
      default: ''
    },
    confirmTitle: {
      type: String,
      default: '确认'
    }
  },
  methods: {
    async handleClick(event) {
      if (this.disabled || this.loading) {
        return
      }

      if (this.confirm) {
        try {
          await this.$confirm(this.confirm, this.confirmTitle, {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch {
          return
        }
      }

      this.$emit('click', event)
    }
  }
}
</script>

<style lang="scss" scoped>
.button-box {
  margin-right: 5px;
  margin-bottom: 5px;
  
  &:last-child {
    margin-right: 0;
  }
}
</style> 